<template>
  <div class="f-g f-c" style="height: 100%">
    <div class="header">
      <div class="title">{{ title }}参会专家</div>
    </div>
    <SearchForm
      :search-list="searchList"
      :search-params="searchParams"
      @search="onSearch"
      @reset="onReset"
    />
    <div class="table-box">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        height="100%"
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
        row-key="id"
      >
        <el-table-column :reserve-selection="true" type="selection" width="55px" label="序号" align="center" />
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" align="center" />
      </el-table>
    </div>
<!--      <div class="page-box">-->
<!--          <el-pagination-->
<!--              background-->
<!--              :current-page="pageNo"-->
<!--              :page-sizes="pageSizes"-->
<!--              :page-size="pageSize"-->
<!--              layout="total, sizes, prev, pager, next, jumper"-->
<!--              :total="totalSize"-->
<!--              @size-change="changePageSize"-->
<!--              @current-change="changePageNo"-->
<!--          />-->
<!--      </div>-->
    <div style="text-align: center;padding-top: 20px">
      <el-button type="primary" @click="onPageBack">上一步</el-button>
      <el-button type="primary" @click="onNext" :loading="loadingNext" :disabled="loadingNext">下一步</el-button>
    </div>
    <el-dialog
      title="专家详情"
      :visible.sync="dialogValue2"
      width="800px"
      append-to-body
    />
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http } from '@/api'
export default {
  name: 'Index',
  mixins: [crud],
  props: {
    projectId: String,
      title: {
        type: String,
          default: '选择'
      }
  },
  data() {
    return {
      searchList: [
        {
          key: 'expertName',
          name: 'input',
          label: '专家名称'
        },
        {
          key: 'industryName',
          name: 'select',
          label: '行业',
          multiple: true,
          options: []
        }
      ],
      searchParams: {
        expertName: '',
        industryName: []
      },
      columns: [
        { prop: 'expertName', label: '专家名称' },
        { prop: 'industryName', label: '行业' },
        { prop: 'industryExpertise', label: '专业特长' }
      ],
      tableData: [

      ],
        pageSize: 9999,
      dialogValue2: false,
        loadingNext: false
    }
  },
  created() {
      this.open()
    http.meeting_apply.hangye().then(res => {
      this.searchList[1].options = res.data.map(el => {
        return {
          name: el,
          value: el
        }
      })
    })
  },
  methods: {
      onSelect(options) {
          console.log(options)
          this.selectOptions = options
      },
      onSelectOne(option) {
          console.log(option)
      },
      onSelectAll(option) {
          console.log(option)
      },
    onReset() {
      this.searchParams = {
        expertName: '',
        industryName: []
      }
      this.onSearch()
    },
    open() {
      if (!this.request) {
        this.request = {
          page: http.meeting_process.professorList
        }
      }
      this.onReset()
      this.dialogValue = true
    },
    async initData() {
      if (!this.projectId || !this.request) return
        this.loading = true
      // const res = await http.meeting_process.professor_accept(this.projectId)
      // const selectOption = [...res.data]
      this.request.page({
        projectId: this.projectId,
        ...this.getQueryParams(),
        industryName: this.searchParams.industryName.join(',')
      }).then(res => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        const selectOption = this.tableData.filter(el => el.status === 1)
        this.$nextTick(() => {
          selectOption.forEach(row => {
            const _row = this.tableData.find(el => el.id == row.id)
            if (_row) {
              this.$refs.multipleTable.toggleRowSelection(_row, true)
            }
          })
            this.$refs.multipleTable.doLayout()
            this.loading = false

        })
      })
    },
    onRead(item) {
      this.currentDetail = item
      this.dialogValue2 = true
    },
    onPageBack() {
      this.$emit('get-page')
      this.dialogValue = false
    },
    onNext() {
          this.loadingNext = true
      http.meeting_process.professorListSave({
        projectId: this.projectId,
        expertId: this.selectOptions.map(el => el.id)
      }).then(res => {
        this.dialogValue = false
        this.$emit('next', this.selectOptions)
      }).catch(() => {
          this.loadingNext = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
